<template>
    <footer class="border-top">
      <ul>
        <router-link
            tag="li"
             v-for="item in list"
             :to="item.router"
            :key="item.id"
            :class="{chosen: item.id === chosen}"
        >
          <i class="iconfont" :class = 'item.icon'></i>
          <p>{{ item.name }}</p>
        </router-link>
      </ul>
    </footer>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Footer',
  computed: {
    ...mapState({'list': 'footerList'}),
    chosen () {
      const route = this.$route.path
      const item = this.list.filter((value) => {
        return value.router === route
      })
      return item[0].id
    }
  }
}
</script>

<style lang='scss' scoped>
  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: #fff;
    border-color: #e5e5e5;
    z-index: 3;
    ul {
      height: 100%;
      display: flex;
      align-items: center;
      li {
        display: flex;
        flex: 1;
        align-items:center;
        flex-direction: column;
        text-align: center;
        color: #ccc;
        .iconfont {
          margin-bottom: 8px;
          font-size: 36px;/*px*/
          color: #ccc;
        }
        &.chosen {
          color: #666;
        }
        &.chosen > .iconfont {
          color: #25a4bb;
        }
      }
    }
  }
</style>
